<template>
  <div class="manual-audit">
    <van-nav-bar title="人工审核" left-arrow @click-left="leftClick">
    </van-nav-bar>
    <div class="manual-audit-topbg"></div>
    <div class="manual-audit-itemName">
      <div class="itemName-item">
        <p class="title">真实姓名</p>
        <input type="text" v-model="name" placeholder="请输入真实姓名" />
      </div>
      <div class="xian"></div>
      <div class="itemName-item">
        <p class="title">身份证号</p>
        <input
          type="text"
          v-model="cId"
          placeholder="请输入15位或者18位身份证号"
        />
      </div>
    </div>
    <div class="manual-audit-item-sfz">
      <p>上传身份证照片</p>
      <div class="manual-audit-item-sfz-img">
        <van-uploader :after-read="afterRead">
          <img :src="fileImg1.content" width="171" height="104" alt="" />
        </van-uploader>

        <van-uploader :after-read="afterRead1">
          <img :src="fileImg2.content" width="171" height="104" alt="" />
        </van-uploader>
      </div>
    </div>
    <div class="manual-audit-item-sfz">
      <p>上传身份证照片</p>
      <div class="manual-audit-item-sfz-img">
        <img
          src="../assets/image/img_manual_audit_itme3.png"
          width="171"
          height="104"
          alt=""
        />
        <van-uploader :after-read="afterRead2">
          <img :src="fileImg3.content" width="171" height="104" alt="" />
        </van-uploader>
      </div>
    </div>
    <div class="next" @click="nextClick">提交</div>
  </div>
</template>
<script>
import { getApiuploadRealNameCertificationImage } from "network/ApiServe";
export default {
  name: "ManualAudit",
  created() {
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
  },
  data() {
    return {
      name: "",
      cId: "",
      fileImg1: {
        content: require("../assets/image/img_manual_audit_itme1.png"),
      },
      fileImg2: {
        content: require("../assets/image/img_manual_audit_itme2.png"),
      },
      fileImg3: {
        content: require("../assets/image/img_manual_audit_itme4.png"),
      },
    };
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.fileImg1 = file;
    },
    afterRead1(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.fileImg2 = file;
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.fileImg3 = file;
    },
    nextClick() {
      let _this = this;

      if (this.name.length == 0) {
        return this.$toast("请输入真实姓名");
      }
      if (this.cId.length <= 14) {
        return this.$toast("请输入身份证号或者身份证号格式不正确");
      }
      let formData = new FormData();
      formData.append("phone", this.phone);
      formData.append("brandId", this.brandId);
      formData.append("image", this.fileImg1.file);
      formData.append("image", this.fileImg2.file);
      formData.append("image", this.fileImg3.file);

      if (
        _this.fileImg1.file != null &&
        _this.fileImg2.file != null &&
        _this.fileImg3.file != null
      ) {
        console.log("getApiuploadRealNameCertificationImage");
        getApiuploadRealNameCertificationImage(formData)
          .then((res) => {
            if (res.resp_code === "000000") {
              _this.$toast("上传" + res.resp_message);
              _this.$router.back(-1);
              return;
            } else {
              _this.$toast(res.resp_message);
            }
            console.log(res, "getApiuploadRealNameCertificationImage");
          })
          .catch((err) => {
            console.log(err, "getApiuploadRealNameCertificationImage");
          });
      } else {
        _this.$toast("请上传照片");
      }
    },
  },
};
</script>
<style scoped>
.manual-audit-topbg {
  height: 142px;
  background-image: url("../assets/image/img_manual_audit_itme0.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.manual-audit-itemName {
  height: 108px;
  background-color: #fff;
  margin-top: -20px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.next {
  margin: 50px auto 90px;
  width: 270px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background-color: var(--app-primary-theme-color);
}
.itemName-item {
  height: 54px;
  font-size: 14px;
  color: #444;
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}
.itemName-item input {
  margin-left: 20px;
  border: 0;
}
.xian {
  height: 1px;
  background-color: #f7f7f7;
}

.manual-audit-item-sfz {
  margin-top: 8px;
  height: 180px;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 12px;
}

.manual-audit-item-sfz p {
  font-size: 14px;
  color: #333;
}
.manual-audit-item-sfz-img {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}
.manual-audit-item-sfz-img img {
  display: block;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>